<template>
  <div class="user-btn-config">
    <el-tooltip
      :content="item.content"
      placement="left"
      v-for="item in btnList"
    >
      <el-button
        :type="item.type"
        circle
        class="btn"
        @click="userHandler(item.click)"
      >
        <template #icon>
          <el-icon :size="18">
            <component :is="item.icon" />
          </el-icon>
        </template>
      </el-button>
    </el-tooltip>
  </div>
</template>

<script setup lang="ts">
import { ZoomIn, Setting, ZoomOut } from "@element-plus/icons-vue";
const emit = defineEmits<{
  (event: "setting"): void;
  (event: "enlarge"): void;
  (event: "narrow"): void;
}>();
const userHandler = (click: any) => emit(click);

const btnList = [
  {
    icon: Setting,
    content: "设置画布",
    type: "success",
    click: "setting",
  },
  {
    icon: ZoomIn,
    content: "放大画布",
    type: "danger",
    click: "enlarge",
  },
  {
    icon: ZoomOut,
    content: "缩小画布",
    type: "warning",
    click: "narrow",
  },
];
</script>

<style scoped lang="scss">
.user-btn-config {
  position: absolute;
  right: 10px;
  top: 10px;
  display: flex;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 8px 5px 3px 5px;
  border-radius: 50px;
  z-index: 100;
  .btn {
    margin-left: 0px;
    margin-bottom: 5px;
  }
}
</style>
